<!-- -->
<template>
  <div id='currency'>
    <div class="tradetop">注册币兑换</div>
    <!-- 我要挂卖 -->
    <div class="tradesell">
        <div class="message">
            <ul>
                <li>可用现金积分：<span>&emsp;&nbsp;{{jifen}}</span></li>
                <li>兑换数量： &emsp;&emsp;&emsp;<input type="text" v-model="number" placeholder="请输入你想要数量"></li>
                <li>兑换所需积分：&emsp;&nbsp;<span style="color:rgba(224,3,0,1)">{{sumprice}}</span></li>
                <li>安全密码：&emsp;&emsp;&emsp;&nbsp;<input type="password" v-model="password" placeholder="请输入你的安全密码">&emsp;输入安全密码以验证身份，确保账号交易安全</li>
            </ul>
        </div>
        <div class="btn">
            <button @click="exchange">确定兑换</button>
            <!-- <button>取消</button> -->
            <p>*注册币兑换后不可撤销。</p>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "currency",
  data() {
    return {
      jifen: "",
      number: "",
      charge: "",
      password: ""
    };
  },
  computed: {
    sumprice: function() {
      return (this.number * this.charge).toFixed(2);
    }
  },
  mounted() {
    this.loadmes();
  },
  methods: {
    loadmes() {
      this.axios
        .post("Index/zcdh")
        .then(({ data }) => {
          console.log(data);
          this.jifen = data.jifen;
          this.charge = data.zcdh;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 确定兑换
    exchange() {
      if (!this.number) {
        this.$message({ message: "数量不能为空", type: "error" });
      } else if (!this.password) {
        this.$message({ message: "请输入密码", type: "error" });
      } else {
        this.axios
          .post("Index/zcdh_cl", {
            num: this.number,
            password: this.password
          })
          .then(({ data }) => {
            console.log(data);
            if (data.status === "1") {
              this.$message({ message: "积分不足", type: "error" });
            } else if (data.status === "2") {
              this.$bus.$emit("loadebuc");
              this.$router.push({ name: "register" });
              this.$message({ message: "兑换成功", type: "success" });
              // this.number = '';
              // this.charge = '';
              // this.password = '';
            } else if (data.status === "3") {
              this.$message({ message: "兑换失败", type: "error" });
            } else if (data.status === "4") {
              this.$message({ message: "密码错误", type: "error" });
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    open2() {
      this.$message({
        message: "操作成功",
        type: "success"
      });
    }
  }
};
</script>
<style lang='scss' scoped>
#currency {
  .tradetop {
    width: 100%;
    height: 55px;
    line-height: 65px;
    font-size: 13px;
    font-family: MicrosoftYaHei-Bold;
    color: rgba(0, 0, 0, 1);
    font-weight: 700;
    padding-left: 25px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(153, 153, 153, 1);
  }
  .tradesell {
    .warning {
      width: 550px;
      margin-top: 15px;
      margin-left: 25px;
      margin-bottom: 30px;
      padding-left: 5px;
      font-size: 11px;
      font-family: MicrosoftYaHei;
      color: rgba(0, 0, 0, 1);
      background: rgba(255, 247, 230, 1);
      border-radius: 2px;
      line-height: 31px;
      border: 1px solid rgba(224, 3, 0, 1);
    }
    .message {
      margin-left: 40px;
      margin-top: 10px;
      li {
        line-height: 50px;
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(102, 102, 102, 1);
        span {
          font-weight: 700;
        }
      }
      input {
        width: 209px;
        height: 33px;
        padding-left: 5px;
        border-radius: 2px;
        border: 1px solid rgba(151, 151, 151, 1);
      }
    }
    .btn {
      margin-top: 50px;
      margin-left: 40px;
      button {
        cursor: pointer;
        width: 82px;
        height: 33px;
        background: rgba(224, 3, 0, 1);
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(255, 255, 255, 1);
        border-radius: 2px;
      }
      button:nth-of-type(2) {
        margin-left: 25px;
        background: rgba(225, 225, 225, 1);
        color: rgba(0, 0, 0, 1);
      }
      p {
        font-size: 11px;
        font-family: MicrosoftYaHei;
        color: rgba(102, 102, 102, 1);
        line-height: 30px;
      }
    }
  }
}
</style>